<template>
<div class="config-list">
    <div>任务添加</div>
  <template v-if="taskList.length !== 0">
    <div class="item between" v-for="(item,index) in taskList" :key="index">
      <span class="left expand center">
          <img :src="require(`@/assets/${item.emitEvent===0?'':'no'}light.png`)" width="15px">
          {{itemValFormat(item)}}
      </span>
      <span class="center">
        <span type="text" @click.stop="changeConfig(item)" class="small-font" style="margin-right:.5rem;"> <font color="#3B19B5">编辑</font></span>
        <span type="text" @click.stop="del(item.id)" class="small-font"><font color="red">删除</font></span>
      </span>
    </div>
  </template>
  <div v-else style="padding:3rem 0;" class="center row-center">暂无配置</div>
</div>
</template>


<script>
export default {
  props:{
    taskList:{
      type:Array,
      default:()=>{
        return [
            { emitEvent:0,emitType:0,sleepTime:0.2,emitObject:[0,1,2,3,4] },
            { emitEvent:1,emitType:0,sleepTime:0.2,emitObject:[0,1,2,3] }
        ]
      }
    },
  },
  data(){
      return {
        emitEventDict:[
            {value: 0,label: 'LED控制'},
            {value: 1,label: '继电器控制'},
        ],
        emitEventModel:0,

        emitTypeDict:[
            {value: 0,label: '禁用'},
            {value: 1,label: '翻转'},
            {value: 2,label: '关'},
            {value: 3,label: '开'},
            {value: 4,label: '点动'},
            {value: 5,label: '延时关'},
        ],
        emitTypeModel:1,
      }
  },
  methods:{
      itemValFormat(item){
          const emitEventName = this.emitEventDict.filter(dict=>item.emitEvent === dict.value)[0].label;
          const emitTypeName = this.emitTypeDict.filter(dict=>item.emitType === dict.value)[0].label;
          return `${emitEventName} / ${emitTypeName} / ${item.sleepTime}`;
      }
  }
}
</script>

<style lang="scss" scoped>
.small-font{
    cursor: pointer;
}
.item{
    margin:.5rem 0;
    .left{
        padding-left:.5rem;
        color:#FF875F;
        background:rgb(255,243,239);
        border-radius:13px;
        margin-right:1rem;
        height:26px;
    }
}
</style>